<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>UAV</title>
    <link rel="icon" href="../favicon.ico">
    <style>
        body {
            align-items: flex-start;
            justify-content: center;
            display: flex;
            flex-direction: column;
            background-color: #000000;
        }

        #title {
            color: #cecece;
            font-size: 1.5rem;
            width: 90%;
            display: block;
            padding: 0.5rem;
            font-weight: bold;
        }

        .container {
            display: flex;
            flex-direction: column;
            width: 96%;
            left: 1%;
            color: #cecece;
            background-color: rgba(255, 255, 255, 0.1);
            margin: 1%;
            padding: 1%;
        }

        .itemContainer {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .item {
            width: 10rem;
            height: 10rem;
            background-color: #ffffff;
            font-size: 1.4rem;
            font-weight: bold;
            text-shadow: 0 0 5px #ffffff;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div id="title">
        <h1>无人机</h1>
        <br>
        声明：受俄乌战争启发而制作的无人机模拟资料，一定程度上还原无人机战场体验。
    </div>

    <div class="container">
        <h2>概览</h2>
        资料中基本上每一小节都是一个独立的无人机使用场景，每小节中的无人机使用方法不尽相同，因此某些小节可能是下一小节的操作说明，
        但相同的操作说明将不会重复阐述，建议逐小节体验，以减少操作方面的困惑。另外，为了用户体验的更多自由，允许通过此页面同时打开多个小节，
        但如果同时打开过多小节，可能会引起设备性能问题，当遇到性能问题时，请尝试关闭打开的过多内容。
    </div>

    <div class="container">
        <h2>正文</h2>
        <div class="itemContainer">
            <button id="section1" class="item" style="background-image: url('./assets/images/uav01.jpg');">
                训练关卡<br>操作说明
            </button>
            <button id="section2" class="item" style="background-image: url('./assets/images/uav01.jpg');">
                训练关卡
            </button>
            <button id="section3" class="item" style="background-image: url('./assets/images/uav02.jpg');">
                关卡1<br>操作说明
            </button>
            <button id="section4" class="item" style="background-image: url('./assets/images/uav02.jpg');">
                关卡1<br>搜寻歼灭
            </button>
            <button id="section5" class="item" style="background-image: url('./assets/images/uav03.jpg');">
                关卡2<br>操作说明
            </button>
            <button id="section6" class="item" style="background-image: url('./assets/images/uav03.jpg');">
                关卡2<br>引导炮火
            </button>
            <button id="section" class="item" style="background-image: url('./assets/images/question.jpg');">
                敬请期待
            </button>
        </div>
    </div>

    <script src="./assets/index.js"></script>

</body>

</html>